import React, {PropsWithChildren, useState} from 'react'
import {Text, View} from "@tarojs/components";
import Taro, {useDidShow, useLoad, useShareAppMessage} from "@tarojs/taro";
import {EmployeeDetailResponse, getEmployeeDetail} from "../apis/EmployeeApi";
import CopyableCell from "../components/CopyableCell";
import {Button, Cell, CellGroup, Space} from "@nutui/nutui-react-taro";
import {YEAR_MONTH_DAY_FORMATER} from "../utils/Date";
import {Copy, Phone} from "@nutui/icons-react-taro";
import styles from "./employeeDetail.module.sass"
import {observer} from "mobx-react";
import employeeStore from "../store/EmployeeStore";
import MyNavigationBar from "../components/MyNavigationBar";

export interface EmployeeDetailProps extends PropsWithChildren {

}

const EmployeeDetail: React.FC<EmployeeDetailProps> = ({}) => {
    const [id, setId] = useState<number>()
    const [data, setData] = useState<EmployeeDetailResponse>()
    useLoad(params => {
        let id = Number(params.id);
        setId(id)
    })
    useDidShow(() => {
        if (id) {
            Taro.showLoading()
            getEmployeeDetail(id).then(response => {
                setData(response.data)
            }).finally(()=>{
                Taro.hideLoading()
            })
        }
    })
    useShareAppMessage((_) => {
        return {
            title: "邀请你登录小程序",
            path: `/pages/logIn?enterpriseCode=${employeeStore.employee!!.systemService.id}&phoneNumber=${data!!.phoneNumber}`
        }
    })
    return <>
        <MyNavigationBar>{data?data.name:"人员详情"}</MyNavigationBar>
        {data &&
            <>
                <CellGroup divider={false}>
                    <CopyableCell title={"姓名"} value={data.name}/>
                    <Cell title={"手机号"} extra={<Space>
                        <Text selectable>{data.phoneNumber}</Text>
                        <Copy onClick={() => {
                            Taro.setClipboardData({
                                data: data.phoneNumber
                            }).then(() => {
                                Taro.showToast({
                                    title: "手机号已复制",
                                    duration: 1000,
                                })
                            });
                        }}/>
                        <Phone onClick={() => {
                            Taro.makePhoneCall({
                                phoneNumber: data.phoneNumber
                            });
                        }}/>
                    </Space>}/>
                    <Cell title={"角色"} extra={data.roles.map(it => it.name).join("，")}/>
                    <Cell title={"创建时间"}
                          extra={(data.createdDateTime).format(YEAR_MONTH_DAY_FORMATER)}/>
                </CellGroup>
                {employeeStore.hasAuthority("人员_修改") && <View className={styles.actions}>
                    <Button block onClick={() => {
                        Taro.navigateTo({
                            url: `/pages/editEmployee?id=${id}&data=${JSON.stringify(data)}`
                        })
                    }}>编辑</Button>
                </View>}
            </>}

    </>
}

export default observer(EmployeeDetail)


